<template>
  <div class="flex-1 page_contain">
    <div class="app-container">
      <!-- 搜索框 -->
      <div class="search-container">
        <el-form :model="searchParam" :inline="true" label-width="40px">
          <el-form-item class="w-[100px]">
            <el-select
              v-model="searchParam.status"
              placeholder="状态"
              filterable
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="w-[100px]">
            <el-select
              v-model="searchParam.year"
              placeholder="请选择"
              filterable
              :suffixIcon="() => '年'"
            >
              <el-option
                v-for="item in yearOptions"
                :key="item"
                :value="item"
                :label="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="w-[100px]">
            <el-select
              v-model="searchParam.month"
              placeholder="请选择"
              filterable
              clearable
              :suffixIcon="() => '月'"
            >
              <el-option
                v-for="item in useDictionary('MonthList')"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <i-ep-search />
              搜索
            </el-button>
            <el-button @click="handleReset">
              <i-ep-refresh />
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 列表 -->
      <div style="height: calc(100vh - 120px - 80px); overflow-y: auto">
        <div class="flex h-[280px] mb-[10px]">
          <div class="flex-1 h-full card_class">
            <div class="card_title">
              设备巡检-年度统计({{
                statusOptions[Number(searchedParam.status) === 1 ? 0 : 1].label
              }})
            </div>
            <deviceManage-line
              :id="`yearTotal1`"
              key="3"
              xUnit="月"
              :params="[reportData?.annualStatistics ?? {}]"
            />
          </div>
        </div>
        <div class="flex h-[300px] mb-[10px]">
          <div class="flex-1 h-full card_class">
            <div class="card_title">
              设备巡检-工段统计({{
                statusOptions[Number(searchedParam.status) === 1 ? 0 : 1].label
              }})
            </div>
            <deviceManage-bar
              :id="`allClose`"
              key="3"
              title=""
              :params="reportData?.aectionStatistics ?? {}"
            />
          </div>
          <div class="flex-1 h-full card_class ml-[10px]!">
            <div class="card_title">
              设备巡检-班组统计({{
                statusOptions[Number(searchedParam.status) === 1 ? 0 : 1].label
              }})
            </div>
            <deviceManage-pie
              :id="`allMonthCount`"
              key="3"
              :params="reportData?.teamStatistics?.data ?? []"
            />
          </div>
        </div>

        <div class="flex mb-[10px]">
          <div class="flex-1 h-full card_class w-[100%]">
            <div class="card_title flex justify-between items-center">
              <span
                >{{ processId ?? "暂无" }}({{
                  statusOptions[Number(searchedParam.status) === 1 ? 0 : 1]
                    .label
                }})</span
              >
              <el-select
                v-model="processId"
                placeholder="请选择工序"
                clearable
                size="small"
                style="width: 130px"
              >
                <el-option
                  v-for="(item, index) in currentProcess"
                  :key="index"
                  :label="item"
                  :value="item"
                  @click="handleProcess"
                />
              </el-select>
            </div>
            <div>
              <div class="h-[300px] flex">
                <deviceManage-bar-one
                  :id="`yearTotal3`"
                  key="6"
                  :title="`人员巡检次数统计`"
                  :params="personnelInspection ?? []"
                  heightClass="h-[300px]!"
                />
              </div>
              <el-divider border-style="dashed" />
              <div class="h-[300px] relative flex">
                <div class="absolute top-[-20px] right-[20px]">
                  <!-- <el-select
                    v-model="monthList"
                    placeholder="请选择月份"
                    clearable
                    size="small"
                    style="width: 130px"
                    multiple
                    collapse-tags
                    :max-collapse-tags="1"
                  >
                    <el-option
                      v-for="(item, index) in useDictionary('MonthList')"
                      :key="index"
                      :label="`${item.label}月`"
                      :value="item.value"
                      @click="handleProcess"
                    />
                  </el-select> -->
                </div>
                <deviceManage-bar-one
                  :id="`yearTotal4`"
                  key="7"
                  :canRotate="false"
                  xUnit="月"
                  :title="`班组巡检结果-年度统计`"
                  :params="teamInspection ?? []"
                  heightClass="h-[300px]!"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import request from "@/utils/request";
import { useDictionary } from "@/utils/useTable";
import dayjs from "dayjs";
import { mockData, mockProcessList } from "./index";

defineOptions({
  name: "EAMEQUDEVICEMANAGEREPORTINSPECT",
  inheritAttrs: false,
});

const monthList = ref([]);

const currentProcess = ref<any>([]);
const statusOptions = ref([
  {
    label: "正常",
    value: 1,
  },
  {
    label: "异常",
    value: 0,
  },
]);

// 获取年度列表
const yearOptions = ref();
async function getYears() {
  const { data } = await request({
    url: "/system/dateInfo/getYearList",
    method: "post",
    data: {},
  });
  yearOptions.value = data;
}

function handleReset() {
  searchParam.status = 1;
  searchParam.year = dayjs().year().toString();
  (searchParam.month = (dayjs().month() + 1).toString()), handleSearch();
}

const processId = ref();
const reportData = ref();
const loading = ref(true);

async function handleSearch() {
  reportData.value = null;
  setTimeout(async () => {
    reportData.value = null;
    loading.value = true;
    Object.assign(searchedParam, searchParam);
    const { data } = await request({
      url: `/eam/equStatistics/queryPointCheckOrderList`,
      method: "post",
      data: {
        statisticsState: searchParam.status,
        statisticsYear: searchParam.year,
        statisticsMoon: searchParam.month,
      },
    }).finally(() => {
      loading.value = false;
    });
    reportData.value = data;

    let list: any = [];
    data.personnelInspection?.map((e) => {
      list.push(e.name);
    });

    let list1: any = [];
    data.teamInspection?.map((e) => {
      list1.push(e.name);
    });

    const arr = Array.from(new Set([...list, ...list1]));
    currentProcess.value = arr;

    processId.value = arr[0] ?? "";

    const current =
      data.personnelInspection.filter((e) => e.name === processId.value)[0] ??
      [];
    personnelInspection.value = [current];

    const current_team =
      data.teamInspection.filter((e) => e.name === processId.value)[0] ?? [];
    teamInspection.value = current_team?.listDate ?? [];

    console.log(personnelInspection.value, teamInspection.value);

    // if (data.personnelInspection.length) {
    //   personnelInspection.value = [data.personnelInspection[0]];
    //   processId.value = data.personnelInspection[0].name;
    // }
    // reportData.value = mockData;
  }, 20);
}

const personnelInspection: any = ref([]);
const teamInspection: any = ref([]);

function handleProcess() {
  const current =
    reportData.value.personnelInspection?.filter(
      (e) => e.name === processId.value
    )[0] ?? {};
  personnelInspection.value = [current];

  const current_team =
    reportData.value.teamInspection?.filter(
      (e) => e.name === processId.value
    )[0] ?? {};
  teamInspection.value = current_team?.listDate ?? [];
}

// tab点击事件
function tabClickHandle(e: any) {
  reportData.value = null;
  handleSearch();
}

// 请求参数
// const requestApi = "/dmpDosPcm/psmprocessdata/queryByPage";

const searchParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
  status: 1,
});

const searchedParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
  status: 1,
});

onMounted(() => {
  getYears();
  handleSearch();
});
</script>

<style lang="scss" scoped>
:deep(.app-container .el-tabs--border-card) {
  box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);
  border: none;
  .el-tabs__content {
    height: calc(100vh - 120px - 80px - 34px);
    overflow-y: auto;
  }
  .el-loading-spinner {
    margin-top: 200px;
  }
}
:deep(.search-container) {
  .el-form-item {
    margin-right: 14px;
  }
  .el-select .el-input .el-select__caret.el-icon {
    font-style: normal;
    transform: none !important;
  }
}

.card_class {
  background-color: var(--el-bg-color-overlay);
  border-radius: 4px;
  box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);
  .card_title {
    white-space: nowrap;
    font-size: 20px;
    color: #333;
    font-family: YOUSHE;
    padding: 10px 20px;
  }
}
</style>
